﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>panel</title>
    <!--引入extjs样式文件-->
    <link rel="stylesheet" type="text/css" href="ExtJS/classic/theme-triton/resources/theme-triton-all.css" />

    <!--引入核心库-->
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>

    <script>

        //Ext初始化完成后才可以调用其中方法
        Ext.onReady(function  ( ) {                                                       

            //1， 创建面板 通过new来创建
            var panel = new Ext.panel.Panel({
                    width:300,
                    height:400,
                    title:'标题',
                    html:'hello',
                    //必须渲染才会显示
                    renderTo:Ext.getBody()                 
             })
            //2，使用create方法来创建
            Ext.create('Ext.panel.Panel',{                     bodyPadding:15,
                    width:300,
                    height:400,
                    title:'标题',
                   
                    items: [{
                                xtype: 'textfield',
                                fieldLabel: 'First Name'
                            }, 
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Last Name'
                            }],
                    //必须渲染才会显示
                    renderTo:Ext.getBody() 
              })
            //使用Ext.create和xtype 方法来创建
            var panel3 = Ext.create({
                    xtype:'panel',
                    width:300,
                    height:400,
                    title:'标题',
                    html:'xxxxx',
                    listeners:{ 
                        close:function(){
                        console.log('关闭...')
                    }} 
                    //必须渲染才会显示
                    //renderTo:Ext.getBody() 
              })

            panel3.render(Ext.getBody())
           //anel3.close();

         
        } )
    </script>
</head>
<body>
     
</body>
</html>